<template>
        <div v-show="fal==d" v-for="(item,d) in student" :key="item.id" :id="d">
            <p >{{d+1}}、{{ item.topics }}</p>
            <template  v-for="(i,index) in item.options" :key="index">
                <input :type="item.type===0?'radio':'checkbox'" :name="item.id">
                <span> {{ rs[index] }}、{{ i }}</span><br>
            </template>
        
        </div>
        <button :disabled="fal==0" @click="fal--">上一页</button>&nbsp;
        <button :disabled="fal==student.length-1" @click="fal++">下一页</button>
       
</template>

<script setup>
import { ref } from 'vue';

const fal = ref(0)
const rs = ref(["A","B","C","D"])
const student = ref([
                        {
                            id: '001',
                            type: 0,
                            topics: '下列选项中哪一项可以用来设置组件的计算属性？',
                            options: ['computed', 'data', 'watch', 'methods'],
                            answer: [0]
                        },
                        {
                            id: '002',
                            type: 0,
                            topics: '下列哪一个指令可以用来绑定动态属性？',
                            options: ['v-if', 'v-show', 'v-for', 'v-bind'],
                            answer: [3]
                        },
                        {
                            id: '003',
                            type: 0,
                            topics: '下列选项中哪一项可以用来设置组件的数据？',
                            options: ['computed', 'data', 'watch', 'methods'],
                            answer: [1]
                        },
                        {
                            id: '004',
                            type: 1,
                            topics: '下列选项中哪些指令可以实现条件渲染？',
                            options: ['v-if', 'v-else', 'v-for', 'v-bind'],
                            answer: [0, 1]
                        }
                    ])

</script>



<style scoped>

</style>